appearance: none
Сброс системных стилей
В настоящее время используется в основном appearance: none для сброса системных стилей, остальные значения не работают практически ни в одном браузере.
resize
Запрет на изменение размера элемента
Свойство resize указывает, можно ли изменить размер элемента. Часто используется для textarea
caret-color
Цвет каретки в поле ввода
Свойство caret-color задаёт цвет текстового курсора в полях ввода
:read-only
Текстовое поле которое нельзя изменить
Псевдокласс :read-only используется для задания стилей полям ввода только для чтения. Другими словами - данные в этом поле ввода пользователь не может изменить или удалить.
:read-write
Стилизация поля для ввода
Псевдокласс :read-write показывает что элемент, например, input или textarea, изменяется.
:hover
Наведение мыши на элемент
Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover .
:active
Момент нажатия мыши на элемент
Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас. Например, можно задать кнопке стиль, который будет виден в тот краткий миг, когда на кнопке зажата клавиша мыши.
:focus
Фокус элемента формы
Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus , и мы можем задать для него красивые стили.
:focus-visible
Особое выделение элемента формы
Псевдокласс :focus-visible используется, когда действительно нужно визуально выделить элементы в фокусе.
:focus-within
Элементы которые находятся в фокусе
Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе.
:checked
Поведение чекбокс и радиокнопок
Псевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок. С его помощью удобно стилизовать эти элементы в их активном состоянии.
:disabled
:enabled
:enabled
Стилизация кнопок, которые нельзя нажать
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
:in-range
:out-of-range
:out-of-range
Поля ввода с атрибуты min и max
Эти псевдоклассы используются для стилизации полей ввода, поддерживающих атрибуты min и max:
:required
Поля формы обязательные для заполнения
Псевдокласс :required, дополняющий основной селектор, поможет выбрать элементы input, textarea или select, у которых задан атрибут required.
:optional
Поля формы не обязательные для заполнения
С помощью псевдокласса :optional можно выбрать элементы, заполнять которые необязательно. Это могут быть input, select и textarea без атрибута required.
:invalid
:valid
:valid
Ошибка заполнения формы
Псевдоклассы используются для стилизации полей формы, филдсетов, либо самой формы:
:placeholder-shown
Выбор полей с подсказками
Псевдокласс :placeholder-shown выбирает на странице все input или textarea, у которых показывается подсказка (плейсхолдер).
:default
Выбор полей заполненные по умолчанию
Псевдокласс :default применяется к элементам, которые используются по умолчанию в группе аналогичных элементов.
:indeterminate
Пеопределённое состояние чекбокса, радиокнопки или прогресс-бара
Псевдокласс, который используется для стилизации трёх элементов: чекбоксов, радиокнопок и прогресс-баров.